<template>
  <div>
    <IndexNavMenu></IndexNavMenu>
    <div style="width:1200px;margin:0px auto;">
      <el-table
        :data="announceList"
        @expand-change="toRead"
        :row-class-name="tableRowClassName">
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <span v-html="props.row.content"></span>
          </template>
        </el-table-column>
        <el-table-column
          label="序号"
          width="80">
          <template slot-scope="scope">
          <span>
            {{scope.$index+1 }}
          </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          min-width="350px">
        </el-table-column>

        <el-table-column
          prop="nCreateTime"
          label="时间">
        </el-table-column>
        <el-table-column
          align="right">
          <template slot="header" slot-scope="scope">
            <el-button @click="toAllRead">全部标记为已读</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import IndexNavMenu from '../common/IndexNavMenu'

export default {
  name: 'NotifyList',
  components: {IndexNavMenu},
  data () {
    return {
      announceList: []
    }
  },
  computed: mapState({
    user: 'user'
  }),
  mounted () {
    this.getListAnnounce()
  },
  methods: {
    getListAnnounce () {
      var _this = this
      this.$axios.post('/api/notify/getUserAnnounce',
        this.$qs.stringify({
          userId: this.user.userId
        })
      )
        .then(function (response) {
          var data = response.data
          if (data.isSuccess) {
            _this.announceList = data.result
          }
        })
    },
    tableRowClassName ({row, rowIndex}) {
      if (row.read === 1) {
        return 'read'
      } else if (row.read === 0) {
        return 'noRead'
      }
    },
    toRead (row) {
      if (row.read === 0) {
        var userNotify = {}
        userNotify.userNotifyId = row.id
        this.$axios.post('/api/notify/updateNoRead',
          this.$qs.stringify({
            userNotifyData: JSON.stringify(userNotify)
          })
        )
          .then(function (response) {
            var data = response.data
            if (data.isSuccess) {
              row.read = 1
            }
          })
      }
    },
    toAllRead () {
      var _this = this
      this.$axios.post('/api/notify/updateAllNoRead',
        this.$qs.stringify({
          userId: this.user.userId
        })
      )
        .then(function (response) {
          var data = response.data
          if (data.isSuccess) {
            _this.$message({
              type: 'success',
              message: '全部标记为已读'
            })
            _this.getListAnnounce()
          }
        })
    }
  }
}
</script>

<style>
  .noRead {
    color: #000;
    font-weight: bold;
  }

  .read {
    color: gray;
  }
</style>
